import type { Element } from "hast";
import type { DiffChange } from "@/lib/dto";
import { highlightWords } from "../hast";

function createLineNode(texts: string[]): Element {
  return {
    type: "element",
    tagName: "diffline",
    properties: {},
    children: texts.map((text) => ({
      type: "element" as const,
      tagName: "span",
      properties: { class: [] },
      children: [{ type: "text" as const, value: text }],
    })),
  };
}

function getSpanClasses(lineNode: Element): string[][] {
  return lineNode.children.map((child) => {
    if (child.type !== "element") return [];
    const classValue = child.properties?.class;
    if (Array.isArray(classValue)) return classValue as string[];
    if (typeof classValue === "string") return [classValue];
    return [];
  });
}

describe("highlightChanges", () => {
  describe("with closing delimiters: '      )' and '}'", () => {
    const texts = ["      )", "}"];
    const changes: DiffChange[] = [
      { start: 6, end: 7, content: ")", highlight: "delimiter" },
      { start: 7, end: 8, content: "}", highlight: "delimiter" },
    ];

    it("should highlight right side spans with green", () => {
      const lineNode = createLineNode(texts);
      highlightWords("right", lineNode, changes);

      // First span "      )" (0-7) has partial change (6-7), so it gets split
      const span0 = lineNode.children[0];
      if (span0.type !== "element") throw new Error("Expected element");
      expect(span0.children).toHaveLength(2);
      // First child: plain text "      " (positions 0-6)
      expect(span0.children[0]).toEqual({ type: "text", value: "      " });
      // Second child: highlighted span with ")"
      const highlightedChild = span0.children[1];
      expect(highlightedChild.type).toBe("element");
      if (highlightedChild.type === "element") {
        expect(highlightedChild.properties?.class).toContain("text-green-600!");
        expect(highlightedChild.children[0]).toEqual({
          type: "text",
          value: ")",
        });
      }

      // Second span "}" (7-8) exactly matches change (7-8), so whole span highlighted
      const classes = getSpanClasses(lineNode);
      expect(classes[1]).toContain("text-green-600!");
    });

    it("should highlight left side spans with red", () => {
      const lineNode = createLineNode(texts);
      highlightWords("left", lineNode, changes);

      // First span "      )" (0-7) has partial change (6-7), so it gets split
      const span0 = lineNode.children[0];
      if (span0.type !== "element") throw new Error("Expected element");
      expect(span0.children).toHaveLength(2);
      // First child: plain text "      "
      expect(span0.children[0]).toEqual({ type: "text", value: "      " });
      // Second child: highlighted span with ")"
      const highlightedChild = span0.children[1];
      expect(highlightedChild.type).toBe("element");
      if (highlightedChild.type === "element") {
        expect(highlightedChild.properties?.class).toContain("text-red-600!");
        expect(highlightedChild.children[0]).toEqual({
          type: "text",
          value: ")",
        });
      }

      // Second span "}" (7-8) exactly matches change (7-8), so whole span highlighted
      const classes = getSpanClasses(lineNode);
      expect(classes[1]).toContain("text-red-600!");
    });
  });

  describe("with JSX-like content", () => {
    const texts = ["{", "!", "leftPath", " &&", " rightPath", " &&", " ("];
    const changes: DiffChange[] = [
      { start: 6, end: 7, content: "{", highlight: "delimiter" },
      { start: 7, end: 8, content: "!", highlight: "keyword" },
      { start: 8, end: 16, content: "leftPath", highlight: "normal" },
      { start: 17, end: 19, content: "&&", highlight: "keyword" },
      { start: 20, end: 29, content: "rightPath", highlight: "normal" },
      { start: 30, end: 32, content: "&&", highlight: "keyword" },
      { start: 33, end: 34, content: "(", highlight: "delimiter" },
    ];